<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Neon Admin Panel">
	<meta name="author" content="">
	
	<title>晓辰-管理员信息</title>
	

	<link rel="stylesheet" th:href="@{/css/jquery-ui-1.10.3.custom.min.css}">
	<link rel="stylesheet" th:href="@{/css/entypo.css}">
	<link rel="stylesheet" th:href="@{/css/css.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
	<link rel="stylesheet" th:href="@{/css/neon-core.css}">
	<link rel="stylesheet" th:href="@{/css/neon-theme.css}">
	<link rel="stylesheet" th:href="@{/css/neon-forms.css}">
	<link rel="stylesheet" th:href="@{/css/custom.css}">

	<script th:src="@{/js/jquery-1.11.0.min.js}"></script>

	<!--[if lt IE 9]><script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
	<style type="text/css">
		body{
			margin: 0px auto;
			width:1550px;
			min-width:1024px;
			max-width:100%;
			height:100%;
			background-color:white;
		}
	</style>
	
</head>
<body class="page-body  page-fade" data-url="http://neon.dev">

<div class="page-container"><!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->

	<!--调用可复用代码：侧边栏-->
	<div th:insert="~{commons/common::sidebar(active='personal.html')}"></div>
	<div class="main-content">
		<!--调用可复用代码：头部栏-->
		<div th:insert="~{commons/common::topbar}"></div>

		<hr>
		<ol class="breadcrumb bc-3">
			<li>
				<a href="toIndex"><i class="entypo-home"></i>数据主页</a>
			</li>
			<li>
				<a href="">我的</a>
			</li>
			<li class="active">
				<strong>基本信息</strong>
			</li>
		</ol>
			
		<h2>主要信息</h2>
		<br>
		<!--认证个人信息-->
		<div class="row">
			<div class="col-md-12">

				<div class="panel panel-primary" data-collapsed="0">

					<div class="panel-heading">
						<div class="panel-title">
							认证个人信息
						</div>

						<div class="panel-options">
							<a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i class="entypo-cog"></i></a>
							<a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
							<a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
							<a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
						</div>
					</div>

					<div class="panel-body">

						<form role="form" class="form-horizontal form-groups-bordered">


							<div class="form-group">
								<div style="display: flex; align-items: center">
									<label for="field-1" class="col-sm-3 control-label">用户</label>
									<div class="col-sm-5">
										<p id="p_admin" style="font-size: 15px; line-height: 15px; margin-bottom: 0px;">[[${session.loginAdmin}]]</p>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label for="field-1" class="col-sm-3 control-label">真实姓名</label>

								<div class="col-sm-5">
									<input type="text" class="form-control" id="field-1" placeholder="雨母三行">
								</div>
							</div>

							<div class="form-group">
								<label for="field-ta" class="col-sm-3 control-label">地址信息</label>

								<div class="col-sm-5">
									<textarea class="form-control" id="field-ta" placeholder="湖南省衡阳市衡祁路28号南华大学"></textarea>
								</div>
							</div>

							<div class="form-group has-error">
								<label for="field-4" class="col-sm-3 control-label">紧急联系电话</label>

								<div class="col-sm-5">
									<input type="text" class="form-control" id="field-4" placeholder="0000 1111">
								</div>
							</div>

							<div class="form-group has-warning">
								<label for="field-5" class="col-sm-3 control-label">紧急联系人姓名</label>

								<div class="col-sm-5">
									<input type="text" class="form-control" id="field-5" placeholder="鱼鱼鱼">
								</div>
							</div>

							<div class="form-group has-success">
								<label for="field-6" class="col-sm-3 control-label">本人电话</label>

								<div class="col-sm-5">
									<input type="text" class="form-control" id="field-6" placeholder="0000 7777">
								</div>
							</div>



							<div class="form-group">
								<div class="col-sm-offset-3 col-sm-5">
									<button type="submit" id="saveButton" class="btn btn-default">提交保存</button>
								</div>
							</div>







							<!--							<div class="form-group">-->
							<!--								<label class="col-sm-3 control-label">性别</label>-->

							<!--								<div class="col-sm-5">-->
							<!--									<select class="form-control">-->
							<!--										<option>男</option>-->
							<!--										<option>女</option>-->
							<!--										<option>其它</option>-->
							<!--									</select>-->
							<!--								</div>-->
							<!--							</div>-->




<!--							<div class="form-group">-->
<!--								<label for="field-2" class="col-sm-3 control-label">密码</label>-->

<!--								<div class="col-sm-5">-->
<!--									<input type="text" class="form-control" id="field-2" placeholder="***" disabled="">-->
<!--								</div>-->
<!--							</div>-->

<!--							<div class="form-group">-->
<!--								<label for="field-3" class="col-sm-3 control-label">确认密码</label>-->

<!--								<div class="col-sm-5">-->
<!--									<input type="password" class="form-control" id="field-3" placeholder="***">-->
<!--								</div>-->
<!--							</div>-->

<!--							<div class="form-group">-->
<!--								<label for="field-1" class="col-sm-3 control-label">身份认证文件</label>-->

<!--								<div class="col-sm-5">-->
<!--									<input type="file" class="form-control" id="field-file" placeholder="Placeholder">-->
<!--								</div>-->
<!--							</div>-->



<!--							<div class="form-group">-->
<!--								<label for="field-ta" class="col-sm-3 control-label">个人昵称</label>-->

<!--								<div class="col-sm-5">-->
<!--									<textarea class="form-control autogrow" id="field-ta" placeholder="凌凌漆"></textarea>-->
<!--								</div>-->
<!--							</div>-->


<!--							<div class="form-group">-->
<!--								<div class="col-sm-offset-3 col-sm-5">-->
<!--									<div class="checkbox">-->
<!--										<label>-->
<!--											<input type="checkbox">隐藏-->
<!--										</label>-->
<!--									</div>-->

<!--									<div class="checkbox">-->
<!--										<label>-->
<!--											<input type="checkbox">勿扰-->
<!--										</label>-->
<!--									</div>-->
<!--								</div>-->
<!--							</div>-->

<!--							<div class="form-group">-->
<!--								<div class="col-sm-offset-3 col-sm-5">-->
<!--									<div class="radio">-->
<!--										<label>-->
<!--											<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">保存-->
<!--										</label>-->
<!--									</div>-->
<!--									<div class="radio">-->
<!--										<label>-->
<!--											<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">修改-->
<!--										</label>-->
<!--									</div>-->
<!--								</div>-->
<!--							</div>-->


						</form>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			$.getJSON("http://localhost:8086/sewage/getForm", function(data) {
				var form = data.data;
				// 更新表单数据
				$('#p_admin').text(form.username);  // 注意 id 名称修改为 p_admin
				$('#field-1').val(form.realName);
				$('#field-ta').val(form.address);
				$('#field-4').val(form.emergencyPhone);
				$('#field-5').val(form.emergencyContact);
				$('#field-6').val(form.phone);
			}).always(function() {
				// 在获取完数据之后进行页面刷新
				// location.reload();  // 刷新当前页面
			});


			var saveButton = document.querySelector('#saveButton');
			saveButton.addEventListener('click', function(event) {
				event.preventDefault();
				var formData = {
					username: $("#username").text(),
					realName: $('#field-1').val(),
					address: $('#field-ta').val(),
					emergencyPhone: $('#field-4').val(),
					emergencyContact: $('#field-5').val(),
					phone: $('#field-6').val(),
					// gender: $('select.form-control').val()
				};
				$.ajax({
					type : 'POST',
					url : 'http://localhost:8086/sewage/saveForm',
					data : JSON.stringify(formData),
					contentType : 'application/json', // 指定 Content-Type
					success : function(data){
						// 显示响应消息
						if (data.message === "success"){
							alert("成功保存");
						}
					},
					error : function(xhr, textStatus, errorThrown){
						console.log(xhr.status + ': ' + errorThrown);
					}
				});
				// $.post('http://localhost:8086/sewage/saveForm', formData, function(data) {
				// 	// 显示响应消息
				// 	if (data.message === "success"){
				// 		alert("成功保存");
				//
				// 	}
				// });
			});


			// $('#saveButton').click(function(event) {
			// 	event.preventDefault();
			// var formData = {
			// 	username: $("#username").text(),
			// 	realName: $('#field-1').val(),
			// 	address: $('#field-ta').val(),
			// 	phone: $('#field-6').val(),
			// 	// gender: $('select.form-control').val()
			// };
			// $.post('http://localhost:8086/saveForm', formData, function(data) {
			// 	// 显示响应消息
			// 	if (data.message === "success"){
			// 		alert("成功保存");
			//
			// 	}
			// });
			// });
			// }
		</script>

		<!--账号添加设置-->
<!--		<div class="row">-->
<!--			<div class="col-md-12">-->

<!--				<div class="panel panel-primary" data-collapsed="0">-->

<!--					<div class="panel-heading">-->
<!--						<div class="panel-title">-->
<!--							账号添加设置-->
<!--						</div>-->

<!--						<div class="panel-options">-->
<!--							<a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i class="entypo-cog"></i></a>-->
<!--							<a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>-->
<!--							<a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>-->
<!--							<a href="#" data-rel="close"><i class="entypo-cancel"></i></a>-->
<!--						</div>-->
<!--					</div>-->

<!--					<div class="panel-body">-->

<!--						<form role="form" class="form-horizontal form-groups-bordered">-->

<!--							<div class="form-group">-->
<!--								<label for="field-1" class="col-sm-3 control-label">账号名</label>-->

<!--								<div class="col-sm-5">-->
<!--									<input type="text" class="form-control input-lg" id="field-1" placeholder="小样">-->
<!--								</div>-->
<!--							</div>-->

<!--							<div class="form-group">-->
<!--								<label for="field-1" class="col-sm-3 control-label">账号密码</label>-->

<!--								<div class="col-sm-5">-->
<!--									<input type="text" class="form-control" id="field-1" placeholder="***">-->
<!--								</div>-->
<!--							</div>-->

<!--							<div class="form-group">-->
<!--								<label for="field-1" class="col-sm-3 control-label">验证电话</label>-->

<!--								<div class="col-sm-5">-->
<!--									<input type="text" class="form-control input-sm" id="field-1" placeholder="0000 9999">-->
<!--								</div>-->
<!--							</div>-->
<!--						</form>-->
<!--					</div>-->
<!--				</div>-->
<!--			</div>-->
<!--		</div>-->



		<footer class="main">

			晓辰学技术

		</footer>
	</div>
	<!--		聊天框-->
	<div th:insert="~{commons/common::rightbar}"></div>
</div>

	<!-- Bottom Scripts -->
	<script th:src="@{/js/main-gsap.js}"></script>
	<script th:src="@{/js/jquery-ui-1.10.3.minimal.min.js}"></script>
	<script th:src="@{/js/bootstrap.js}"></script>
	<script th:src="@{/js/joinable.js}"></script>
	<script th:src="@{/js/resizeable.js}"></script>
	<script th:src="@{/js/neon-api.js}"></script>
	<script th:src="@{/js/bootstrap-switch.min.js}"></script>
	<script th:src="@{/js/neon-chat.js}"></script>
	<script th:src="@{/js/neon-custom.js}"></script>
	<script th:src="@{/js/neon-demo.js}"></script>

</body>
</html>